// // //1、通过document获取根节点
// // console.log(document.documentElement)//对应的html标签
// // //2、通过documeng获取body节点
// // console.log(document.body);//对应body节点

// // var lis = document.getElementsByTagName("ul")[0];
// // var box = document.getElementsByClassName("box")[0];
// // var list = document.getElementsByTagName("li")[2];
// // console.log(box);
// // //查询lis、box的节点类型
// // console.log(lis.nodeType, box.nodeType); //

// // console.log(lis.getAttributeNode("class").nodeType); // 2
// // //nodeName: 节点名称
// // if (box.nodeType == 1) {
// //   console.log(box.nodeName); //DIV 返回大写的标签名
// // }
// // //childNodes: 获取所有子节点（含文本节点）
// // console.log(lis.childNodes); //[text, li, text, li, text, li, text]
// // //children: 获取所有子节点（不含文本节点）
// // console.log(lis.children); //[li, li, li]
// // //firstChild: 第一个子节点（含文本节点）
// // console.log(lis.firstChild); //我是ul节点
// // //firstElementChild: 第一个子节点（不含文本节点）
// // console.log(lis.firstElementChild); //<li>1</li>
// // //lastChild: 最后一子节点（含文本节点）
// // console.log(lis.lastChild); //我是ul节点text
// // //lastElementChild: 第一个子节点（不含文本节点）
// // console.log(lis.lastElementChild); //<li>3</li>
// // //previousSibling: 获取上一个兄弟节点（含文本节点）
// // console.log(box.previousSibling); //#text
// // //previousElementSibling: 获取上一个兄弟节点（不含文本节点)
// // console.log(box.previousElementSibling); //ul
// // //nextSibling: 获取下一个兄弟节点（含文本节点）
// // console.log(lis.nextSibling); //
// // //nextElementSibling: 获取下一个兄弟节点（不含文本节点）
// // console.log(lis.nextElementSibling); //div
// // //parentNode: 获取当前元素及其父级下所有的元素节点（通过子级找父级）
// // console.log(list.parentNode); //
// // //parentElement: 获取当前元素及其父级下所有的元素节点（通过子级找父级）
// // console.log(list.parentElement); //

// // function $(str) {
// //   return document.getElementById(str);
// // }
// // //hasChildNodes(): 检查是否有子节点
// // console.log($("lis").hasChildNodes()); //true （文本、空格和换行都是子节点）
// // var list = document.createElement("li");
// // console.log(list); //li
// // list.innerHTML = "我是第一个li节点"; //把创建的节点插入到lis中去
// // //list.appendChild();向节点添加最后一个子节点（一定要是节点）
// // $("lis").appendChild(list);
// // var list1 = document.createElement("li");
// // list1.innerHTML = "我是第二个li节点";
// // $("lis").appendChild(list1);
// // //insertBefore(): 在已有的节点前插入新的节点
// // var list2 = document.createElement("li");
// // list2.innerHTML = "我是第1.5个li节点";
// // $("lis").insertBefore(list2, list1);
// // //relpaceChild(): 用一个新的节点替换某一个指定节点
// // var list3 = document.createElement("li");
// // list3.innerHTML = "我是第三个li节点";
// // $("lis").replaceChild(list3, list1);
// // //removeChild(): 删除节点
// // $("lis").removeChild(list3);
// // $("lis").removeChild(list2);
// // //cloneNode(): 复制节点
// // //复制ul下面的第一个li
// // // var app1 = $('lis').children[0].cloneNode();
// // app1 = list.cloneNode(); //浅复制
// // console.log(app1);
// // app2 = list.cloneNode(true); //深复制
// // console.log(app2); //
// // $("lis").appendChild(app2);

// // var box = document.getElementById("app");
// // var aa = document.getElementsByTagName("a")[0];
// // var ipt = document.getElementById("ipt");
// // var ipts = document.getElementsByClassName("ipts")[0];
// // //id : ID获取与更改 、className：类名的获取与更改
// // console.log(box.className); //box
// // box.id = "pages";
// // // box.className = 'apps'
// // console.log(box.id, box.className);
// // //classList:类名列表
// // console.log(box.classList); //类名列表
// // console.log((box.classList[4] = "f")); //f
// // box.classList.remove("f");
// // box.classList.add("h");
// // console.log(box.classList);
// // console.log(box.classList.contains("i")); //false
// // // //href
// // console.log(aa.href); //https://www.baidu.com/
// // aa.href = "https://www.alibaba.com";
// // console.log(aa.href);
// // //getAttribute(): 获取元素自带的属性或自定义属性
// // console.log(box.getAttribute("id")); //pages
// // console.log(box.getAttribute("class")); //box a b c d h
// // console.log(box.getAttribute("name")); //abc
// // console.log(box.getAttribute("item")); //def
// // //setAttribute(): 设置元素自带的属性或自定义属性
// // box.setAttribute("id", "abc");
// // console.log(box.getAttribute("id")); //abc
// // box.setAttribute("item", "hij");
// // console.log(box.getAttribute("item")); //hij
// // //removeAttribute(): 删除元素自带的属性或自定义属性
// // box.removeAttribute("item");
// // console.log(box.getAttribute("item")); //null
// // box.removeAttribute("id");
// // console.log(box.getAttribute("id")); //null
// // //activeElement: 返回文档中获取焦点的元素
// // var num = 200;
// // // 聚焦
// // ipt.onfocus = function () {
// //   num--;
// //   console.log(document.activeElement);
// //   console.log(num);
// // };
// // // 失焦
// // ipt.onblur = function () {
// //   num++;
// //   console.log(document.activeElement);
// //   console.log(num);
// // };
// // if (ipt.focus()) {
// //   console.log("aaa");
// // }
// // if (ipts.blur()) {
// //   console.log("bbb");
// // }

// // var box = document.getElementById("box");
// // //offsetLeft 获取对象左侧与父级的距离
// // console.log(box.offsetLeft); //30
// // //offsetTop 获取对象顶部与父级的距离
// // console.log(box.offsetTop); //50
// // //offsetWidth :获取对象自身的宽度(含边框)
// // console.log(box.offsetWidth); //304
// // //offsetHeight :获取对象自身的高度(含边框)
// // console.log(box.offsetHeight); //304
// // //问题1:如何获取右侧和底部边框的偏移量
// // console.log(box.offsetLeft + box.offsetWidth); //334
// // console.log(box.offsetTop + box.offsetHeight); //354

// // //clientLeft 获取边框外部到内部距离(左边框的宽度)
// // console.log(box.clientLeft); //2
// // //clientTop 获取边框外部到内部距离(上边框的宽度)
// // console.log(box.clientTop); //2
// // //clientWidth 获取自身的宽度(不含边框)
// // console.log(box.clientWidth); //300
// // //clientHeight 获取自身的高度(不含边框)
// // console.log(box.clientHeight); //300

// // //获取元素
// // var _view = document.getElementsByClassName("view")[0];
// // var _content = document.getElementsByClassName("content")[0];
// // var _lis = document.getElementsByTagName("li");
// // //动态设置高宽 计算 _content宽度 = _view的自身宽度 * _lis的个数
// // var _vw = _view.clientWidth;
// // var _vh = _view.clientHeight;
// // console.log(_vw);
// // var _length = _lis.length;
// // console.log(_length);
// // var maxW = _vw * _length;
// // console.log(maxW); //容器的宽度
// // //给li设置每一个的宽度
// // for (var i = 0; i < _lis.length; i++) {
// //   _lis[i].style.width = _vw + "px";
// //   _lis[i].style.height = _vh + "px";
// // }
// // // //给ul设置宽度
// // _content.style.width = maxW + "px";

// var box1 = document.getElementsByClassName("box1")[0];
// console.log(box1.scrollLeft); //0
// box1.scrollLeft = 300;
// console.log(box1.scrollLeft); //300
// var box2 = document.getElementsByClassName("box2")[0];
// console.log(box2.scrollTop); //0
// box2.scrollTop = 500;
// console.log(box2.scrollTop); //500
// console.log(box1.scrollWidth, box2.scrollHeight); //5000 2000

// function $(str) {
//   return document.getElementById(str);
// }
// $("a").onclick = function (e) {
//   console.log(window.event);
//   alert("点击事件");
// };
// $("b").ondblclick = function () {
//   alert("双击事件");
// };
// $("c").onmouseover = function () {
//   this.style.color = "red";
// };
// $("c").onmouseout = function () {
//   this.style.color = "blue";
// };
// $("d").onfocus = function () {
//   this.style.backgroundColor = "red";
// };
// $("d").onblur = function () {
//   this.style.backgroundColor = "blue";
// };
// // 输入
// $("e").oninput = function () {
//   this.style.backgroundColor = "red";
// };
// // value值的改变
// $("e").onchange = function () {
//   this.style.backgroundColor = "blue";
// };
// //错误事件
// window.onerror = function (e) {
//   var e = e || window.event;
//   console.log(e.error);
// };
// window.onkeydown = function (ev) {
//   var ev = ev || window.event;
//   console.log(ev.keyCode);
// };
// window.onkeyup = function (ev) {
//   var ev = ev || window.event;
//   console.log("这是点击键盘值为" + ev.keyCode);
// };
// window.onload = function () {
//   //一般写在头部
//   console.log("ssss");
// };
// //鼠标按下 移动 松开事件
// var i = 0;
// window.document.onmousedown = function (ev) {
//   var ev = ev || window.event;
//   //设备窗口
//   console.log("设备窗口：X" + ev.screenX + "：Y" + ev.screenY);
//   //文档窗口
//   console.log("文档窗口：X" + ev.clientX + "：Y" + ev.clientY);
//   //可视窗口
//   console.log("可视窗口：X" + ev.offsetX + "：Y" + ev.offsetY);
//   //事件坐标
//   console.log("事件坐标：X" + ev.pageX + "：Y" + ev.pageY);

//   console.log("aaa");
//   window.document.onmousemove = function () {
//     i++;
//     console.log(i);
//   };
//   window.document.onmouseup = function () {
//     i = 0;
//     window.document.onmousemove = null;
//   };
// };
// // 鼠标滚动
// window.document.onmousewheel = function () {
//   console.log("bbbbbbb");
// };

// //鼠标右键,组织右键菜单事件
// document.oncontextmenu = function (ev) {
//   var ev = ev || event;
//   // 禁用原来自己的事件
//   ev.preventDefault();
//   //if(ev.preventDefault){不需要了，因为IE已死
//   //    ev.preventDefault(); //主流浏览器阻止右键菜单事件
//   //}else{
//   //    ev.returnValue = false; //IE 阻止右键菜单事件
//   //}
//   //自定义菜单栏
//   document.getElementById("box").style.display = "block";
//   document.getElementById("box").style.left = ev.clientX + "px";
//   document.getElementById("box").style.top = ev.clientY + "px";
//   console.log("事件触发位置:" + ev.clientX + ":" + ev.clientY);
// };
// //鼠标左键点击消失自定义菜单
// document.onclick = function () {
//   document.getElementById("box").style.display = "none";
// };
// //阻止ctrl + c组合
// document.onkeydown = function (ev) {
//   var ev = ev || window.event;
//   console.log(ev.keyCode); //ctrl键值17  c键值67
//   if (ev.ctrlKey && ev.keyCode == 17 && ev.keyCode == 67) {
//     ev.preventDefault();
//   }
//   alert("不允许复制");
// };

// var box = document.getElementById("box");
// //给box绑定事件
// box.onmousedown = function (ev) {
//   var ev = ev || window.event;
//   ev.preventDefault();
//   //获取事件位置(在元素内的事件位置)
//   var x = ev.clientX - box.offsetLeft;
//   var y = ev.clientY - box.offsetTop;
//   //移动
//   document.onmousemove = function (ev) {
//     var ev = ev || window.event;
//     ev.preventDefault();
//     //获取最新的x、y轴
//     var _x = ev.clientX;
//     var _y = ev.clientY;
//     //计算移动距离  = 最新的坐标 - 事件轴
//     var newX = _x - x;
//     var newY = _y - y;
//     //赋值
//     box.style.left = newX + "px";
//     box.style.top = newY + "px";
//   };
// };
// //释放事件
// document.onmouseup = function () {
//   document.onmousemove = null;
// };

// var wrap = document.getElementById("wrap");
// var box = document.getElementById("box");
// box.onclick = function () {
//   console.log("我是子级元素");
// };
// wrap.onclick = function () {
//   console.log("我是父级元素");
// };

//事件捕获：事件捕获阶段：事件从Document开始

// box.onclick = function(event) {
//   console.log('我是子级元素')
//   // event.stopPropagation() // 禁止向上冒泡
// 	// event.preventDefault()//阻止浏览器默认事件，不能阻止事件冒泡
// }
// // //阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
// // box.addEventListener('click', function(event) {
// //   event.stopPropagation() //阻止冒泡,防止事件穿透
// // }, false)
// wrap.onclick = function(event) {
//   // event.stopImmediatePropagation()
//   // event.preventDefault()//不能拦截事件
//   // console.log('我是父级元素')
// }
//事件拦截： 在事件达到目标之前， 父元素可以拦截事件， 进行预处理， 或阻止事件继续向下传播
// wrap.addEventListener('click', function(event) {
// 	event.stopImmediatePropagation() //阻止事件继续往下传播
// 	console.log("我是父级元素wrap，我拦截我子元素的事件，你永远点击不到它")
// }, true) //true捕获阶段

//捕获事件的监听
// window.document.addEventListener(
//   "click",
//   function () {
//     console.log("我是document捕获阶段所需要触发的事件");
//   },
//   true
// );
// document.body.addEventListener(
//   "click",
//   function () {
//     console.log("我是body捕获阶段所需要触发的事件");
//   },
//   true
// );
// wrap.addEventListener(
//   "click",
//   function () {
//     console.log("我是wrap捕获阶段所需要触发的事件");
//   },
//   true
// );
// box.addEventListener(
//   "click",
//   function () {
//     console.log("我是box捕获阶段所需要触发的事件");
//   },
//   true
// );
// //冒泡阶段进行监听
// window.document.addEventListener(
//   "click",
//   function () {
//     console.log("我是document冒泡阶段所需要触发的事件");
//   },
//   false
// );
// document.body.addEventListener(
//   "click",
//   function () {
//     console.log("我是body冒泡阶段所需要触发的事件");
//   },
//   false
// );
// wrap.addEventListener(
//   "click",
//   function () {
//     console.log("我是wrap冒泡阶段所需要触发的事件");
//   },
//   false
// );
// box.addEventListener(
//   "click",
//   function () {
//     console.log("我是box冒泡阶段所需要触发的事件");
//   },
//   false
// );

//假设有100个button,100button做监听是比较耗费性能
// var wrap = document.getElementById('table')
// var box = document.getElementsByClassName('button')
//常规方法 做100个目标元素的监听
// for (var i = 0; i < box.length; i++) {//不建议这样写;太消耗性能
// 	//为100个button元素添加事件
// 	box[i].addEventListener('click', function() {
// 		console.log('aaaa')
// 	})
// }
//事件委托写法
// wrap.addEventListener('click', function(event) {
//   var _target = event.target || event.srcElement
//   console.log(_target)
//   if (_target.nodeName == 'BUTTON') {
//     console.log("点击任意元素，父级触发，我进行了事件的委托")
//   }
// })

// 获取所需元素
// var oCity = document.getElementById("city");
// var oItems = document.getElementById("items");
// var oLis = oItems.children;
// //正常写法
// oCity.onclick = function(){
// 	oItems.style.display = 'block'
// 	//给每一个li绑定点击事件
// 	for(var i=0;i<oLis.length;i++){
// 		oLis[i].index = i
// 		oLis[i].onclick = function(){
// 			for(var j=0;j<oLis.length;j++){
// 				oLis[j].className = ''
// 			}
// 			oItems.style.display = 'none'
// 			oCity.innerHTML = this.innerHTML
// 			oLis[this.index].className = 'active'
// 		}
// 	}
// }
// //优化代码
// oCity.onclick = function () {
//   oItems.style.display = "block";
//   //给每一个li绑定点击事件
//   oItems.addEventListener("click", function (event) {
//     var _target = event.target || event.srcElement;
//     for (var j = 0; j < oLis.length; j++) {
//       oLis[j].className = "";
//     }
//     if (_target.nodeName == "LI") {
//       oItems.style.display = "none";
//       oCity.innerHTML = _target.innerHTML;
//       _target.className = "active";
//     }
//   });
// };

//监听页面加载完毕事件
// window.addEventListener("load", function () {
//   setTimeout(function () {
//     //获取加载动画元素
//     const loader = document.getElementById("loader");
//     console.log(loader);
//     //隐藏加载动画
//     loader.style.display = "none";
//     //显示页面内容
//     const content = document.getElementById("content");
//     content.style.display = "block";
//     //启动动画
//     startAnimation();
//   }, 3000);
// });

// //定义动画启动逻辑的函数
// function startAnimation() {
//   //示例动画逻辑
//   console.log("Animation started");
//   //可以在这里添加更多的动画逻辑
//   const content = document.getElementById("content");
//   content.style.opacity = "0";
//   content.style.transition = "opacity 2s";
//   setTimeout(() => {
//     content.style.opacity = "1";
//   }, 100);
// }
